<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>树型导航</title>
    <script src="jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
            color: black;
            text-decoration: none;
        }
        div.nav {
            width: 300px;
            height: 600px;
            border: 1px solid red;
        }
        /* ul.nav {
            list-style: none;
        } */
        /* ul.nav>li { */
        li {
            width: 300px;
            line-height: 30px;
        }
        /* ul.nav>li span.anim { */
        span.anim {
            opacity: 1;
            color: grey;
            line-height: 30px;
            width: 40px;
            display: inline-block;
            text-align: center;
        }
        /* 悬浮时的样式 */
        .over {
            background: rgb(229, 229, 236);
        }
        /* 父列表点击后的样式 */
        .click {
            background: rgb(182, 182, 196);
        }
        /* 一层子列表点击后的样式 */
        .clickson {
            background: rgb(221, 204, 210);
        }
        /* 二层子列表点击后的样式 */
        .clickss {
            background: rgb(165, 211, 147);
        }
        .col {
            color: rgb(165, 222, 245)!important;
        }
        /* 小箭头旋转的样式 */
        .rota {
            transform: rotate(90deg);
        }
        ul.list {
            display: none;
        }
        
    </style>
</head>
<body>
    <!-- 导航盒子 -->
    <div class="nav">
        <ul class="nav">
            <li>
                <div class="ct">
                    <span class="ico"></span>
                    <span class="anim">></span>
                    <a href="#">C盘</a>
                </div>
                <ul class="list">
                    <li>
                        <div class="ct">   
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="ico"></span>
                            <span class="anim">></span>
                            <a href="">Apps</a>
                        </div>
                        <ul class="list listson">
                            <li>
                                <div class="ct ctson"> 
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span class="ico"></span>
                                    <span class="anim">></span>
                                    <a href="">App的哈哈哈</a>
                                </div>
                            </li>
                            <li>
                                <div class="ct ctson"> 
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span class="ico"></span>
                                    <span class="anim">></span>
                                    <a href="">App的哈哈哈</a>
                                </div>
                            </li>
                            <li>
                                <div class="ct ctson"> 
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span class="ico"></span>
                                    <span class="anim">></span>
                                    <a href="">App的哈哈哈</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="ct">  
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="ico"></span>
                            <span class="anim">></span>
                            <a href="">用户</a>
                        </div>
                    </li>
                    <li>
                        <div class="ct">  
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="ico"></span>
                            <span class="anim">></span>
                            <a href="">Windows</a>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="ct">
                    <span class="ico"></span>
                    <span class="anim">></span>
                    <a href="#">D盘</a>
                </div>
                <ul class="list">
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">公司相关</a>
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">自学代码</a>
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">文件</a>
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">图片</a>
                    </li>
                </ul>
            </li>
            <li>
                <div class="ct">
                    <span class="ico"></span>
                    <span class="anim">></span>
                    <a href="#">E盘</a>
                </div>
                <ul class="list">
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">软件</a>
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">视频</a>
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">文档</a>
                    </li>
                </ul>
            </li>
            <li>
                <div class="ct">
                    <span class="ico"></span>
                    <span class="anim">></span>
                    <a href="#">F盘</a>
                </div>
                <ul class="list">
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">奥特曼</a>
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">奥特曼</a>
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">奥特曼</a>
                    </li>
                    <li>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="ico"></span>
                        <span class="anim">></span>
                        <a href="">奥特曼</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <!-- 内容容器 -->
    <div class="cont">
        <iframe src="" frameborder="0"></iframe>
    </div>


    <script>
        $(function() {
            // // 小箭头的显隐
            // $('div.nav').hover(function(){
            //     // 悬浮时显示，离开时隐藏
            //     $('ul.nav li').children('div.ct').children('span.anim').css('opacity',1);
            // },function() {
            //     $('ul.nav li').children('div.ct').children('span.anim').css('opacity',0);
            // })

            // 悬浮时横条背景颜色的显隐
            $('ul.nav li').hover(function() {
                $(this).stop().addClass('over');
            },function() {
                $(this).stop().removeClass('over').siblings().removeClass('over');
            })

            // 点击目录横条时变背景颜色 
            // $('ul.nav>li').click(function() {
            $('li').click(function() {            
                $(this).siblings('li').children('div.ct').removeClass('click');
                $(this).parent('ul.list').siblings('div.ct').removeClass('click');
                // $('*:not(contains)')
                // $(this).addClass('click');
                $(this).children('div.ct').addClass('click');
                $(this).children('ul.list').addClass('clickson');
            })


            // 子目录Apps悬浮时变颜色
            // $('ul.listson>li').hover(function() {
            //     $(this).siblings('li').children('div.ct').removeClass('clickss');
            //     $(this).children('div.ct').addClass('clickss');
            // })

            // 悬浮在小箭头，变颜色
            // $('ul li').children('div.ct').children('span.anim').hover(function() {
            $('ul li .anim').hover(function() {
                $(this).parent().siblings().children().removeClass('col');
                $(this).addClass('col');
            },function() {
                $(this).removeClass('col');
            })

            // 点击小箭头的时候，小箭头旋转；子列表上滑下拉
            $('span.anim').click(function() {
                $(this).toggleClass('rota');
                $(this).parent('div.ct').siblings('ul.list').stop().fadeToggle();
            })
        })
    </script>
</body>
</html>